<script lang="ts">
  import { LL } from "@undb/i18n/client"
  import { preferences } from "$lib/store/persisted.store"
</script>

{#if !$preferences.playgroundModeDismissed}
  <div
    id="banner"
    tabindex="-1"
    class="z-50 flex h-14 w-full items-center justify-center gap-8 border border-b border-gray-200 bg-gray-50 px-4 py-2 sm:items-center lg:py-3 dark:border-gray-700 dark:bg-gray-800"
  >
    <p class="text-center text-sm text-gray-500 dark:text-gray-400">
      {$LL.playground.playgroundModeDescription()}
    </p>
    <!-- <button
      data-collapse-toggle="banner"
      type="button"
      class="flex items-center rounded-lg p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
      on:click={() => {
        $preferences.playgroundModeDismissed = true
      }}
    >
      <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
        ><path
          fill-rule="evenodd"
          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
          clip-rule="evenodd"
        ></path></svg
      >
    </button> -->
  </div>
{/if}
